<template>
  <div>
    <Headline
      :headline1="$t('m.SystemManagement') + '  /  '"
      :headline2="$t('m.SystemUser')"
    />
    <a-card style="width: 100%">
      <a-input-search
        :placeholder="$t('m.PleaseEnterYourSearchTerms')"
        enter-button
        style="width: 200px; margin-right: 20px"
        @search="onSearch"
      />
      <a-button type="primary" icon="plus" style="margin-right: 20px">{{
        $t("m.AddUser")
      }}</a-button>
      <a-button type="primary" icon="edit">{{ $t("m.EditUser") }}</a-button>
      <a-table
        size="small"
        style="margin-top: 20px"
        :columns="columns"
        :rowKey="(record, i) => i"
        :data-source="data"
        :pagination="false"
        border
      >
        <div slot="status" slot-scope="text, tags, i">
          <a-switch
            :checked="tags.status == 1 ? true : false"
            @change="statusChange(text, tags, i)"
          />
        </div>
        <div slot="del" slot-scope="text, tags, i">
          <a-button @click="del(text, tags, i)" type="primary">{{
            $t("m.Delete")
          }}</a-button>
          <a-button type="primary">{{ $t("m.ResetPasswords") }}</a-button>
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import { getSysUserList } from "@/api/User";
export default {
  name: "UserAdmin",
  components: { Headline },
  data() {
    return {
      arguments: {
        start: 0,
        page: 1,
        limit: 10,
      },
      data: [],
      columns: [
        { title: this.$t("m.SystematicName"), dataIndex: "userCode" },
        { title: this.$t("m.Name"), dataIndex: "nickname" },
        { title: this.$t("m.CharacterName"), dataIndex: "planName" },
        { title: this.$t("m.UserType"), dataIndex: "userType" },
        { title: this.$t("m.LoginNumber"), dataIndex: "loginTime" },
        { title: this.$t("m.LastLogin"), dataIndex: "lastLoginDate" },
        { title: this.$t("m.LastLoginIP"), dataIndex: "lastLoginIp" },
        {
          title: this.$t("m.Status"),
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
        },
        { title: this.$t("m.Operation"), scopedSlots: { customRender: "del" } },
      ],
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    del(text, tags, i) {},
    statusChange(text, tags, i) {},
    onSearch() {},
    getUserList() {
      getSysUserList({ params: this.arguments })
        .then((res) => {
          this.data = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>